
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var sanfco = new google.maps.LatLng(-31.430164494018083, -62.08545684814453);

  var buses = [
    new google.maps.LatLng(-31.425257466552033, -62.08850383758545),
    new google.maps.LatLng(-31.42520253568669, -62.09428668022156),
    new google.maps.LatLng(-31.42554127551035, -62.086374163627625),
    new google.maps.LatLng(-31.424161131943638, -62.08270221948624)
  ];

  var markers = [];
  var iterator = 0;

  var map;

  function initialize() {
    var mapOptions = {
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: sanfco
    };

    map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
  }

  function drop() {
    for (var i = 0; i < buses.length; i++) {
      setTimeout(function() {
        addMarker();
      }, i * 200);
    }
  }

  function addMarker() {
    markers.push(new google.maps.Marker({
      position: buses[iterator],
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
    }));
    iterator++;
  }
</script>
</head>
<body onload="initialize()">
<button id="drop" onclick="drop()">Mostrar la posicion de todos los colectivos</button>
<div id="map_canvas" style="width: 1000px; height: 800px;">map div</div>
</body>
</html>
